import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Col, notification, Popconfirm, Row, Switch, Table } from 'antd';
import { Link } from 'umi';
import routes from '@/routes';
import { PlusOutlined, SettingOutlined } from '@ant-design/icons/lib';
import React from 'react';
import { useRequest } from 'ahooks';
import { ApiResult } from '@/services/ApiResult';
import { PageResult } from '@/services/PageResult';
import { PluginAliyunSLBDto } from '@/services/dto/PluginAliyunSLBDto';
import { PluginAliyunPolardbDto } from '@/services/dto/PluginAliyunPolardbDto';

export default (props: any) => {


  const defaultPageSize = 10;

  const pageResult = useRequest<ApiResult<PageResult<PluginAliyunPolardbDto>>>(
    ({ current, pageSize }) => routes.apiRoutes.pluginAliyunPolardbPage({ pageNo: current, pageSize: pageSize }),
    {
      manual: false,
      paginated: true,
      refreshOnWindowFocus: false,
      defaultPageSize,
    });


  const updateMonitorUseRequest = useRequest(
    (payload) => routes.apiRoutes.pluginAliyunPolardbUpdateMonitor(payload),
    {
      manual: true,
      onSuccess: (data, params) => {
        if (data.code !== 1) {
          notification.error({
            message: `请求错误 ${data.code}: ${routes.apiRoutes.pluginAliyunPolardbSave().url}`,
            description: data.desc,
          });
          return;
        }
        notification.success({
          message: `服务器：${params[0]?.instanceName}`,
          description: '操作成功',
        });
      },
    });


  const deleteUseRequest = useRequest(
    (payload) => routes.apiRoutes.pluginAliyunPolardbDelete(payload),
    {
      manual: true,
      onSuccess: (data, params) => {
        if (data.code !== 1) {
          notification.error({
            message: `请求错误 ${data.code}: ${routes.apiRoutes.pluginAliyunPolardbDelete().url}`,
            description: data.desc,
          });
          return;
        }
        notification.success({
          message: `${params[0]?.instanceName} 删除`,
          description: '操作成功',
        });
        pageResult.run({ current: 1, pageSize: 10 });
      },
    });

  const columns = [
    {
      title: '资源名称',
      dataIndex: 'instanceName',
      key: 'instanceName',
    },
    {
      title: '资源实例id',
      dataIndex: 'instanceId',
      key: 'instanceId',
    },
    {
      title: '操作',
      dataIndex: 'isMonitor',
      key: 'instanceId',
      render: (_: any, record: PluginAliyunSLBDto) => {
        return <div>
          <Switch checkedChildren="关闭监控"
                  unCheckedChildren="启用监控"
                  defaultChecked={record.isMonitor}
                  onChange={(checked) => {
                    updateMonitorUseRequest.run({
                      instanceId: record.instanceId,
                      isMonitor: checked,
                      instanceName: record.instanceName,
                    });
                  }}
          /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Popconfirm placement="top" title={'确认删除'}
                      onConfirm={() => {
                        deleteUseRequest.run({ instanceId: record.instanceId, instanceName: record.instanceName });
                      }}
                      okText="Yes" cancelText="No">
            <Button type="dashed" danger size={'small'}>删除</Button>
          </Popconfirm>
        </div>;
      }
      ,
    },
  ];
  return (
    <PageHeaderWrapper>
      <Row justify={'end'} style={{ backgroundColor: '#ffffff' }}>
        <Col style={{ padding: '10px' }}>
          <Link to={routes.pageRoutes.pluginAliyunMonitorPolardbSettingCreate}><PlusOutlined/> 添加Polardb</Link>
        </Col>
      </Row>
      <Table dataSource={pageResult?.data?.result?.data} columns={columns} pagination={{
        position: ['topRight', 'bottomRight'],
        defaultPageSize,
        defaultCurrent: 1,
        showSizeChanger: true,
        total: pageResult?.data?.result?.total,
        onChange: (current) => {
          pageResult.params[0].current = current;
          pageResult.run(pageResult.params[0]);
        },
        onShowSizeChange: (current, pageSize) => {
          pageResult.params[0].current = current;
          pageResult.params[0].pageSize = pageSize;
          pageResult.run(pageResult.params[0]);
        },
      }}/>
    </PageHeaderWrapper>
  );
}
